<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识点记忆游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            background: #f0f0f0;
        }

        .main-container {
            display: flex;
            width: 100%;
            height: 100vh;
        }

        .game-container {
            flex: 1;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(30, 1fr);
            padding: 0;
            gap: 0;
            border-radius: 0;
        }

        .sidebar {
            width: 150px;
            height: 100vh;
            background: white;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .stats-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .stats-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .stats-value {
            font-size: 24px;
            color: #333;
            font-weight: bold;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e9ecef;
            border-radius: 3px;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #43cea2, #185a9d);
            border-radius: 3px;
            width: 0%; /* 将通过JavaScript动态更新 */
            transition: width 0.3s ease;
        }

        /* 调整其他现有样式 */
        .viewport-container {
            flex: 1;
            overflow: hidden;
        }

        .blog-input {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.95);
            padding: 60px;
            border-radius: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            display: none;
            backdrop-filter: blur(10px);
            width: 1200px;
            z-index: 1000;
        }

        .blog-input h3 {
            margin: 0 0 40px 0;
            color: #333;
            font-size: 36px;
            text-align: center;
        }

        .blog-input input {
            width: 100%;
            padding: 24px 30px;
            border: 3px solid #e0e0e0;
            border-radius: 16px;
            margin-bottom: 40px;
            font-size: 24px;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

        .blog-input input:focus {
            outline: none;
            border-color: #43cea2;
        }

        .blog-input .button-group {
            display: flex;
            gap: 20px;
            justify-content: flex-end;
        }

        .blog-input button {
            padding: 20px 40px;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            font-size: 24px;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 200px;
        }

        .blog-input button:first-child {
            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
            color: white;
        }

        .blog-input button:last-child {
            background: #f5f5f5;
            color: #666;
        }

        .blog-input button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        /* 添加遮罩层 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(5px);
            display: none;
            z-index: 999;
        }

        .grid-cell {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            backdrop-filter: blur(2px);
            transition: background 0.3s ease;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .grid-cell:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .knowledge-block {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #FF6B6B, #FFE66D);
            border-radius: 8px;
            position: absolute;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 1px;
            padding: 10px;
            text-align: center;
            color: #333;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease, background 0.3s ease;
            z-index: 1;
            box-sizing: border-box;
            padding: 5px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .knowledge-block:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
            background: linear-gradient(45deg, #FF8E8E, #FFE66D);
        }

        /* 添加紧急程度区域样式 */
        .urgency-zone {
            position: absolute;
            width: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .urgency-zone-1 {
            background: rgba(76, 175, 80, 0.1); /* 绿色 - 安全区 */
            height: 20%;
            top: 0;
        }

        .urgency-zone-2 {
            background: rgba(255, 235, 59, 0.1); /* 黄色 - 注意区 */
            height: 20%;
            top: 20%;
        }

        .urgency-zone-3 {
            background: rgba(255, 152, 0, 0.1); /* 橙色 - 警告区 */
            height: 20%;
            top: 40%;
        }

        .urgency-zone-4 {
            background: rgba(244, 67, 54, 0.1); /* 红色 - 危险区 */
            height: 20%;
            top: 60%;
        }

        .urgency-zone-5 {
            background: rgba(183, 28, 28, 0.1); /* 深红色 - 严重区 */
            height: 20%;
            top: 80%;
        }

        /* 修改知识方块样式，添加不同状态的颜色 */
        .knowledge-block.safe {
            background: linear-gradient(45deg, #81C784, #A5D6A7);
            color: #1B5E20;
        }

        .knowledge-block.notice {
            background: linear-gradient(45deg, #FFF176, #FFEE58);
            color: #F57F17;
        }

        .knowledge-block.warning {
            background: linear-gradient(45deg, #FFB74D, #FFA726);
            color: #E65100;
        }

        .knowledge-block.danger {
            background: linear-gradient(45deg, #E57373, #EF5350);
            color: #B71C1C;
        }

        .knowledge-block.critical {
            background: linear-gradient(45deg, #E53935, #C62828);
            color: white;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

        /* 添加响应式字体大小 */
        @media screen and (max-width: 1200px) {
            .knowledge-block {
                font-size: 16px;
            }
        }

        @media screen and (max-width: 768px) {
            .knowledge-block {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="viewport-container">
            <div class="game-container" id="gameContainer"></div>
        </div>
        <div class="sidebar">
            <div class="stats-card">
                <div class="stats-title">持续打卡</div>
                <div class="stats-value" id="streakDays">0 天</div>
            </div>
            <div class="stats-card">
                <div class="stats-title">今日进度</div>
                <div class="stats-value" id="todayProgress">0%</div>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-title">总学习天数</div>
                <div class="stats-value" id="totalDays">0 天</div>
            </div>
        </div>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="blog-input" id="blogInput">
        <h3>请输入今天的学习博客地址</h3>
        <input type="text" id="blogUrl" placeholder="输入博客URL">
        <div class="button-group">
            <button onclick="submitBlog()">提交</button>
            <button onclick="closeBlogInput()">取消</button>
        </div>
    </div>

    <script>
        const COLS = 15;
        const ROWS = 30;
        let currentBlock = null;

        // 示例知识点数据
        const knowledgePoints = [
            "HTML5", "CSS3", "JavaScript", "Vue.js", "React", 
            "Node.js", "Python", "Java", "Git", "Docker"
        ];

        // 添加控制同时显示卡片数量的常量
        const ACTIVE_BLOCKS = 5; // 同时显示5个知识卡片

        function createGrid() {
            const container = document.getElementById('gameContainer');
            
            // 添加紧急程度区域
            for (let i = 1; i <= 5; i++) {
                const zone = document.createElement('div');
                zone.className = `urgency-zone urgency-zone-${i}`;
                container.appendChild(zone);
            }

            // 创建网格单元格
            for (let i = 0; i < ROWS * COLS; i++) {
                const cell = document.createElement('div');
                cell.className = 'grid-cell';
                container.appendChild(cell);
            }
        }

        function createBlock() {
            const block = document.createElement('div');
            block.className = 'knowledge-block safe'; // 添加初始安全状态
            const randomKnowledge = knowledgePoints[Math.floor(Math.random() * knowledgePoints.length)];
            block.textContent = randomKnowledge;
            
            // 获取当前所有方块的列位置
            const existingBlocks = document.getElementsByClassName('knowledge-block');
            const occupiedCols = Array.from(existingBlocks).map(block => 
                Math.floor(parseInt(block.style.left) / document.querySelector('.grid-cell').offsetWidth)
            );
            
            // 找到一个未被占用的列
            let col;
            do {
                col = Math.floor(Math.random() * COLS);
            } while (occupiedCols.includes(col));
            
            const cellWidth = document.querySelector('.grid-cell').offsetWidth;
            const cellHeight = document.querySelector('.grid-cell').offsetHeight;
            
            // 精确设置位置和大小
            block.style.width = `${cellWidth}px`;
            block.style.height = `${cellHeight}px`;
            block.style.left = `${col * cellWidth}px`;
            block.style.top = '0px';
            
            // 存储当前所在行
            block.dataset.currentRow = 0;
            block.dataset.currentCol = col; // 存储当前列位置
            
            block.onclick = () => showBlogInput(block);
            
            document.getElementById('gameContainer').appendChild(block);
            return block;
        }

        function showBlogInput(block) {
            currentBlock = block;
            document.getElementById('blogInput').style.display = 'block';
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('blogUrl').focus(); // 自动聚焦到输入框
        }

        function closeBlogInput() {
            document.getElementById('blogInput').style.display = 'none';
            document.getElementById('overlay').style.display = 'none';
            document.getElementById('blogUrl').value = '';
        }

        function submitBlog() {
            const blogUrl = document.getElementById('blogUrl').value;
            if (blogUrl.trim() !== '') {
                const cellHeight = document.querySelector('.grid-cell').offsetHeight;
                const currentRow = parseInt(currentBlock.dataset.currentRow);
                
                // 向上移动一行
                currentBlock.dataset.currentRow = currentRow - 1;
                currentBlock.style.top = `${(currentRow - 1) * cellHeight}px`;
                
                // 更新进度
                stats.todayProgress += 5;
                if (stats.todayProgress >= 100) {
                    stats.streakDays++;
                    stats.totalDays++;
                    stats.todayProgress = 100;
                }
                
                localStorage.setItem('learningStats', JSON.stringify(stats));
                updateStats();
                
                closeBlogInput();
            } else {
                alert('请输入有效的博客地址！');
            }
        }

        function startGame() {
            createGrid();
            for(let i = 0; i < ACTIVE_BLOCKS; i++) {
                createBlock();
            }
            updateStats();
            
            const today = new Date().toDateString();
            const lastUpdate = localStorage.getItem('lastUpdate');
            if (lastUpdate !== today) {
                stats.todayProgress = 0;
                localStorage.setItem('lastUpdate', today);
                localStorage.setItem('learningStats', JSON.stringify(stats));
                updateStats();
            }
            
            setInterval(() => {
                const blocks = document.getElementsByClassName('knowledge-block');
                const cellHeight = document.querySelector('.grid-cell').offsetHeight;
                
                Array.from(blocks).forEach(block => {
                    // 使用行号进行移动
                    const currentRow = parseInt(block.dataset.currentRow);
                    const nextRow = currentRow + 1;
                    
                    block.dataset.currentRow = nextRow;
                    block.style.top = `${nextRow * cellHeight}px`;
                    
                    // 更新方块颜色
                    updateBlockUrgencyColor(block);
                    
                    // 检查是否到达底部
                    if (nextRow >= ROWS - 1) {
                        block.remove();
                        createBlock();
                    }
                });

                const currentBlockCount = document.getElementsByClassName('knowledge-block').length;
                if (currentBlockCount < ACTIVE_BLOCKS) {
                    for(let i = 0; i < ACTIVE_BLOCKS - currentBlockCount; i++) {
                        createBlock();
                    }
                }
            }, 3000);
        }

        // 添加新的统计相关函数
        let stats = {
            streakDays: 0,
            todayProgress: 0,
            totalDays: 0
        };

        function updateStats() {
            // 从localStorage获取统计数据
            const savedStats = localStorage.getItem('learningStats');
            if (savedStats) {
                stats = JSON.parse(savedStats);
            }
            
            // 更新DOM
            document.getElementById('streakDays').textContent = `${stats.streakDays} 天`;
            document.getElementById('todayProgress').textContent = `${stats.todayProgress}%`;
            document.getElementById('totalDays').textContent = `${stats.totalDays} 天`;
            document.getElementById('progressFill').style.width = `${stats.todayProgress}%`;
        }

        startGame();

        // 添加点击遮罩层关闭弹框
        document.getElementById('overlay').addEventListener('click', closeBlogInput);

        // 添加按下ESC键关闭弹框
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeBlogInput();
            }
        });

        // 添加回车键提交
        document.getElementById('blogUrl').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitBlog();
            }
        });

        // 修改窗口大小改变时的处理
        window.addEventListener('resize', () => {
            const blocks = document.getElementsByClassName('knowledge-block');
            const cellWidth = document.querySelector('.grid-cell').offsetWidth;
            const cellHeight = document.querySelector('.grid-cell').offsetHeight;
            
            Array.from(blocks).forEach(block => {
                const col = Math.floor(parseInt(block.style.left) / block.offsetWidth);
                const currentRow = parseInt(block.dataset.currentRow);
                
                block.style.width = `${cellWidth}px`;
                block.style.height = `${cellHeight}px`;
                block.style.left = `${col * cellWidth}px`;
                block.style.top = `${currentRow * cellHeight}px`;
            });
        });

        // 添加检查和更新方块颜色的函数
        function updateBlockUrgencyColor(block) {
            const containerHeight = document.querySelector('.game-container').offsetHeight;
            const blockTop = parseInt(block.style.top);
            const position = (blockTop / containerHeight) * 100;

            // 移除所有现有的紧急程度类
            block.classList.remove('safe', 'notice', 'warning', 'danger', 'critical');

            // 根据位置添加对应的紧急程度类
            if (position < 20) {
                block.classList.add('safe');
            } else if (position < 40) {
                block.classList.add('notice');
            } else if (position < 60) {
                block.classList.add('warning');
            } else if (position < 80) {
                block.classList.add('danger');
            } else {
                block.classList.add('critical');
            }
        }
    </script>
</body>
</html> 